<template>
	<view>
			<!-- 筛选 -->
			<view class="filter">
			  <text class="active">综合</text>
			  <text>销量</text>
			  <text>价格</text>
			</view>
			<scroll-view class="goods" scroll-y @scrolltolower="getMore">
	      <!-- 遍历 -->
	     <view
				class="item"
				v-for="item in goodsList"
				:key="item.goods_id"
				@click="goDetail(item.goods_id)">
				<!-- 商品图片 -->
				<image class="pic" :src="item.goods_small_logo" />
				<!-- 商品信息 -->
				<view class="meta">
	          <view class="name">{{ item.goods_name }}</view>
	          <view class="price">
	            <text>￥</text>{{ item.goods_price }}
	            <text>.00</text>
				</view>
				</view>
			</view>
			<view class="nomore" v-if="this.total>0&&(this.total===this.goodsList.length)">没有更多数据...</view>
			</scroll-view>
		</view>
</template>

<script>
	export default{
		data(){
			return{
				queryData:{
					pagenum:1,
					query:"",
				},
				 total: 0,
				goodsList:[]
			}
		},
		 onLoad(params) {
		 this.queryData.query=params.query
		 this.getList()
		},
		methods:{
			 async getList(){
			const res = await this.request({url:'/goods/search',data:this.queryData})
			this.total=res.total
			this.goodsList.push(...res.data.goods )
			},
			goDetail(id){
				uni.navigateTo({
					url:"/packone/goods/goods?id="+id
				})
			},
			getMore(){
				if(this.total===this.goodsList.length){
					return
				}
				this.queryData.pagenum++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
	